<template>
  <div class="add-contract-container layout-padding">
    <el-page-header @back="router.back()">
      <template #content> {{ title }} </template>
    </el-page-header>
    <el-card shadow="hover" class="layout-padding-auto" style="margin-top: 16px">
      <el-steps :active="state.activeStep" align-center finish-status="success">
        <el-step title="基础信息"> </el-step>
        <el-step title="活动内容"></el-step>
        <el-step title="完成"> </el-step>
      </el-steps>
      <div v-show="state.activeStep === 0" class="form-wrap">
        <BasicInfo ref="basicFormRef" />
      </div>
      <div v-show="state.activeStep === 1" style="width: 800px; margin: 20px auto 0">
        <ActivityContent ref="contentRef" />
      </div>
      <div class="form-wrap" style="padding-left: 120px">
        <el-button v-if="state.activeStep === 1" @click="state.activeStep = state.activeStep - 1"
          >上一步</el-button
        >
        <el-button v-if="state.activeStep < 1" type="primary" @click="onNext">下一步</el-button>
        <el-button v-if="state.activeStep === 1" type="primary" @click="onSubmit">提交</el-button>
      </div>
      <div v-if="state.activeStep === 3" class="form-wrap">
        <el-result icon="success" :title="isEdit ? '活动修改成功' : '活动创建成功'">
          <template #extra>
            <el-button style="width: 88px" @click="router.back()">返回</el-button>
            <el-button type="primary" @click="onViewDetail">查看详情</el-button>
          </template>
        </el-result>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="createActivity">
import { reactive, onMounted, ref } from 'vue';
import { ElSteps, ElLoading } from 'element-plus';
import { createActivity, updateActivity, readOneActivity } from '/@/api/activity';
import { useRouter } from 'vue-router';
import { readAllMerchant } from '/@/api/merchant';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { assginDefault } from '/@/utils/assign-default';
import BasicInfo from './components/basic-info.vue';
import ActivityContent from './components/content.vue';
import { omit } from 'lodash/fp';

const router = useRouter();
const route = useRoute();

const basicFormRef = ref<InstanceType<typeof BasicInfo>>();
const contentRef = ref<InstanceType<typeof ActivityContent>>();

const state = reactive({
  activeStep: 0,
  merchants: [],
  basicForm: null,
  content: '',
  tempId: null
});

const isEdit = computed(() => {
  return route.name === 'activityEdit';
});

const title = computed(() => {
  if (isEdit.value) {
    return '编辑活动';
  }

  return route.query.pid ? '新增补充活动' : '新增活动';
});

const getCustomers = async () => {
  const { data } = await readAllMerchant();
  state.merchants = data.list;
};

onMounted(() => {
  getCustomers();

  if (isEdit.value) {
    getDetail();
  }
});

const getDetail = async () => {
  const { data } = await readOneActivity(route.query.id as string);
  const omitedData = omit([
    'rate',
    'sort',
    'created_at',
    'updated_at',
    'visite_num',
    'activity_items'
  ])(data);
  const basicInfo = omitedData;

  basicFormRef.value.setFieldsValue(basicInfo);
  contentRef.value.setValue(data.content);
};

const onNext = async () => {
  await basicFormRef.value.validate();
  state.basicForm = basicFormRef.value.getFieldsValue();
  state.activeStep += 1;
};

const onSubmit = async () => {
  const content = await contentRef.value.validate();
  const basicData = state.basicForm;
  const postData = {
    ...basicData,
    content
  };

  const loading = ElLoading.service({ text: '提交中' });

  let res;
  try {
    if (isEdit.value) {
      res = await updateActivity(route.query.id as string, postData);
    } else {
      res = await createActivity(postData);
    }
    state.activeStep = 3;
    loading.close();
    state.tempId = res?.data?.id;
  } catch (err) {
    loading.close();
  }
};

const onViewDetail = () => {
  router.replace({ name: 'activityDetail', query: { id: state.tempId || route.query.id } });
};
</script>

<style scoped lang="scss">
.add-contract-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }
}

.form-wrap {
  width: 600px;
  margin: 20px auto 0;
}

.payment-term {
  margin-bottom: 16px;
}
</style>
